<script setup lang="ts">
import { REMOVE_BLANK_SPACE_FN, HANDLE_TAB } from '@/common/hooks'
// import type { FormConfigType } from '@/components/formTemplateType'
import type { FormInstance } from 'element-plus'

type FormItemType = {
	type: string,
	key: string,
	value: string | number | boolean,
	label: string,
	placeholder: string
	[property: string]: any
}
type FormConfigType = {
	isFirstLogin?: boolean
	labelWidth: string
	formItems: FormItemType[],
	rules: any
	[property: string]: any
}
const { 
	isFirstLogin, 
	labelWidth, 
	formItems, 
	rules
} = defineProps<FormConfigType>()

interface FT {
	[property: string]: any
}
type FormType = FT
const formData = defineModel<FormType>('formData', {required: true})
const formRef = ref<FormInstance>()
const resetForm = () => {
	formRef.value?.resetFields()
}

// 过滤表单内容头尾空白格
const inputValueCommonFn = (formDataProperty: string) => {
	formData.value[formDataProperty as keyof typeof formData.value] = REMOVE_BLANK_SPACE_FN(formData.value[formDataProperty])
}


defineExpose({
	resetForm,
	formRef
})
</script>

<template>
	<slot name="header"></slot>
	<el-form
		ref="formRef" 
		:model="formData" 
		:label-width="isFirstLogin ? 0 : labelWidth"
		:rules="rules"
	>
		<template v-for="(item, index) in formItems" :key="index">
			<el-form-item :label="item.label" :test="item.key" :prop="item.key">
				<!-- 输入框 & 密码框 -->
				<template v-if="item.type === 'input' || item.type === 'password'">
					<el-input 
						v-model="formData[item.key]" 
						:placeholder="item.placeholder" 
						:show-password="item.type === 'password'" 
						:maxlength="item.maxLength" 
						:readonly="item.isReadonly" 
						:disabled="item.isReadonly" 
						@blur="inputValueCommonFn(item.key)" 
						clearable
					/>
				</template>

				<!-- 下拉框 -->
				<template v-else-if="item.type === 'select'">
					<el-select 
						v-model="formData[item.key]" 
						:placeholder="item.placeholder" 
						clearable 
					>
						<template v-for="o in item.options" :key="o.value">
							<el-option 
								:label="o.label" 
								:value="o.value" 
							/>
						</template>
					</el-select>
				</template>

				<!-- 开关按钮 -->
				<template v-else-if="item.type === 'switch'">
					<el-switch 
						v-if="item.isShowOnOff" 
						v-model="formData[item.key]" 
						active-text="on" 
						inactive-text="off" 
						inline-prompt 
					/>
					<el-switch 
						v-else 
						v-model="formData[item.key]" 
					/>
				</template>

				<!-- 单选框 -->
				<template v-else-if="item.type === 'radio'">
				<el-radio-group v-model="formData[item.key]">
					<template v-for="o in item.options" :key="o.value">
						<el-radio :label="o.label" :value="o.value" />
					</template>
				</el-radio-group>
				</template>

				<!-- 复选框 -->
				<template v-else-if="item.type === 'checkbox'">
					<el-checkbox-group v-model="formData[item.key]">
						<template v-for="o in item.options" :key="o.value">
							<el-checkbox :label="o.label" :value="o.value" />
						</template>
					</el-checkbox-group>
				</template>

				<!-- 单个日期 -->
				<template v-else-if="item.type === 'date'">
					<el-col :span="6">
						<el-date-picker 
							v-model="formData[item.key]" 
							:type="item.type" 
							:placeholder="item.placeholder" 
							:style="`width: ${item.width}`" 
							format="YYYY/MM/DD" 
        					value-format="YYYY-MM-DD" 
						/>
					</el-col>
				</template>

				<!-- 日期范围 -->
				<template v-else-if="item.type === 'daterange'">
					<el-col :span="6">
						<el-date-picker
							v-model="formData[item.key]" 
							:type="item.type" 
							:style="`width: ${item.width}`" 
							range-separator=" 至 " 
							start-placeholder="开始日期" 
							end-placeholder="结束日期" 
							format="YYYY/MM/DD" 
        					value-format="YYYY-MM-DD" 
						/>
					</el-col>
				</template>

				<!-- 文本域 -->
				 <template v-else-if="item.type === 'textarea'">
					<el-input 
						v-model="formData[item.key]" 
						:type="item.type" 
						:placeholder="item.placeholder" 
						:rows="item.rows" 
						:readonly="item.isReadonly" 
						:disabled="item.isReadonly" 
						@keydown.tab.prevent="HANDLE_TAB" 
						clearable
					/>
				</template>
			</el-form-item>
		</template>
	</el-form>

	<slot name="footer"></slot>
</template>

<style lang="scss" scoped>

</style>